import React, { useState } from 'react'
import formimg from '../../assets/Yiqixiu/formimg.png'
import style from './yqworks.module.css'
import { Button } from 'antd'
import { HighlightOutlined, SendOutlined } from '@ant-design/icons'
import { HistogramOutline } from 'antd-mobile-icons'
function WorksFour() {
    const itemsfour = [
    { id: 1, title: '平安城市征文活动投票评选', date: '2024-09-20', views: 0, vistors: 0, forms: 0, type: '表单', fix: '未发布', color: '#2cb2c3', img: formimg }
  ]
  // 为每个项目添加一个状态来跟踪hover状态  
  const [hoverIndices, setHoverIndices] = useState(new Set());

  // 处理鼠标进入事件  
  const handleMouseEnter = (index) => {
    setHoverIndices(prev => new Set([...prev, index]));
  };

  // 处理鼠标离开事件  
  const handleMouseLeave = (index) => {
     setHoverIndices(prev => {  
    // 将 Set 转换为数组，然后过滤掉 index  
    const newIndices = Array.from(prev).filter(i => i !== index);  
    // 将过滤后的数组转换回 Set  
    return new Set(newIndices);  
  });  
  };
  return (
   <div className={style.alls}>
      {itemsfour.map((item, index) => (
        <div
          className={style.all}
          key={item.id}
          onMouseEnter={() => handleMouseEnter(index)}
          onMouseLeave={() => handleMouseLeave(index)}
        >
          <img src={item.img} alt="" />
          <p>
            <Button size="small" style={{ color: item.color, fontSize: '12px' }}>
              {item.type}
            </Button>
          </p>
          <h3>{item.title}</h3>
          <span>{item.date}</span><br /><br />
          <p><b>{item.views}</b>浏览 <b>{item.vistors}</b>访客 <b>{item.forms}</b>表单</p>
          <p className={style.fb}>{item.fix}</p>

          {/* 根据hoverIndices来决定是否渲染hov元素 */}
          {hoverIndices.has(index) && (
            <div className={style.hov}>
              <button className={style.btn}>预览</button>
              <div className={style.p1}>
                <p>
                  <span><HighlightOutlined style={{ fontSize: '20px' }} /></span><br />
                  <span>编辑</span>
                </p>
                <p>
                  <span><SendOutlined style={{ fontSize: '20px' }} /></span><br />
                  <span>数据</span>
                </p>
                  <p>
                  <span><HistogramOutline style={{ fontSize: '20px' }} /></span><br />
                  <span>推广</span>
                </p>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

export default WorksFour
